<template>
  <el-col :span="24">
    <el-col :span="24" style="text-align: left">
      <el-input style="width: 250px" v-model="searchValue"></el-input>
      <el-button class="ms-3" plain @click="searchWord">搜索单词</el-button>
    </el-col>

    <el-col :span="24" class="d-flex justify-content-around align-items-center flex-wrap">

      <el-card class="mt-5" style="width: 49%;height: 400px;text-align: left" v-for="items in wordsList.page.records"
               :key="items.id" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="color: darkred;font-size: 24px;font-weight: 800">{{ items.word }}</span>
        </div>

        <div class="text item p-1">
          <span style="color:#de7622" v-html="items.tran"></span>
        </div>
        <div class="text item p-1" v-if="items.adj!=''">
          <span style="color: #999">形容词:</span> <span style="color:#de7622">{{ items.adj }}</span>
        </div>
        <div class="text item p-1" v-if="items.ado!=''">
          <span style="color: #999">过去分词:</span> <span style="color:#de7622">{{ items.ado }}</span>
        </div>
        <div class="text item p-1" v-if="items.ing!=''">
          <span style="color: #999">现在分词:</span> <span style="color:#de7622">{{ items.ing }}</span>
        </div>
        <div class="text item p-1" v-if="items.plural!=''">
          <span style="color: #999">复数:</span> <span style="color:#de7622">{{ items.plural }}</span>
        </div>
        <div class="text item p-1" v-if="items.example!=''">
          <span style="color:#360707" v-html="items.example"></span>
        </div>
      </el-card>
    </el-col>


    <el-col :span="24" class="mt-4">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        :total="wordsList.page.total"
      >
      </el-pagination>

    </el-col>
  </el-col>

</template>

<script>


import $http from '@/axios/api'

export default {
  name: 'dictionaries',
  data () {
    return {
      searchType: true,
      searchValue: '',
      wordsList: {
        page: {
          total: 1
        }
      },
      currentPage: 1
    }
  },
  mounted () {
    this.$http.getWordsList({
      limit: 1,
      size: 10
    }).then(res => {
      console.log(res.data)
      this.wordsList = res.data
    })
  },
  methods: {
    handleCurrentChange (val) {
      if (this.searchType) {
        this.$http.getWordsList({
          limit: val,
          size: 10
        }).then(res => {
          console.log(res.data)
          this.wordsList = res.data
        })
      } else {
        this.$http.searchWord({
          limit: val,
          size: 10,
          word: this.searchValue
        }).then(res => {
          this.wordsList = res.data
        })
      }
    },
    searchWord () {
      // searchValue
      this.searchType = false
      this.$http.searchWord({
        limit: 1,
        size: 10,
        word: this.searchValue
      }).then(res => {
        this.wordsList = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
